<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    background-color="#f1f8fd"
    active-text-color="#7ab3f5"
    :router="true"
  >
    <MenuTree :menuList="menuList"></MenuTree>
  </el-menu>
</template>

<script lang="ts" setup name="MenuComponent">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import MenuTree from './MenuTree.vue'
import menu from '../utils/menu'
import staffMenu from '../utils/staffMenu'
import { useUserStore } from '../stores/userStore'
const userStore = useUserStore()
const menuList = userStore.userInfo.role === '管理员' ? menu : staffMenu

const route = useRoute()
const activeIndex = ref(route.path)

watch(
  () => route.path,
  (newPath) => {
    activeIndex.value = newPath
  },
)
</script>
